
<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 发布管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </div>
            <el-table :data="data" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column type="index" width="55" align="center" label="排序"></el-table-column>
                <el-table-column prop="activityname" label="活动主题" width="120">
                </el-table-column>
                <el-table-column label="活动海报" width="100">
                    <template slot-scope="scope">
                        <img width="100%;" :src="'http://localhost/fitness/public/static/img/'+scope.row.pic" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="activityinfo" label="活动简介" width="auto">
                </el-table-column>
                <el-table-column prop="activityplace" label="活动地点" width="260">
                </el-table-column>
                <el-table-column prop="activitytime" label="活动时间" width="200">
                </el-table-column>
                <el-table-column prop="activitymoney" label="活动金额" width="120">
                </el-table-column>
                <el-table-column label="活动状态" width="100" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.activitystate===1">
                            <i class="el-icon-circle-close" style="color:red"> 已禁用</i>
                        </template>
                        <template v-else>
                            <i class="el-icon-circle-check" style="color:#1e90ff"> 进行中</i>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.activitystate===1">
                            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
                            <el-button type="text" icon="el-icon-circle-check" @click="handleOn(scope.row)">启用</el-button>
                        </template>
                        <template v-else>
                            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.row)">过期</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="50px">
                <el-form-item label="主题">
                    <el-input v-model="form.activityname"></el-input>
                </el-form-item>                
                <el-form-item label="海报">
                        <div class="image-pre">
                            <span class="upload-m">     
                                <el-button type="primary" @click="editChoiceAvatar">上传
                                    <i class="el-icon-upload el-icon--right"></i></el-button>
                                <input type="file" name="pic" id="editFile" class="el-upload__input" accept="image/*"
                                ref="editfile" @change="editAvatar()">
                            </span><br>
                            <div class="pre-view">
                                <img :src="editfile" alt="">
                            </div>
                        </div>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="form.activityinfo"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.activityplace"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker type="datetime" placeholder="选择日期" v-model="form.activitytime" 
                    value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="金额">
                    <el-input v-model="form.activitymoney" type="number"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">确定废弃该条活动？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 启用提示框 -->
        <el-dialog title="提示" :visible.sync="onVisible" width="300px" center>
            <div class="del-dialog-cnt">确定启用该条活动？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="onVisible = false">取 消</el-button>
                <el-button type="primary" @click="onRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { fetchData } from '../api/index';
    import { test } from '../api/index';
    export default {
        name: 'basetable',
        data() {
            return {
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                select_word: '',
                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,
                form: {
                    activityname:'',
                    activitytime:'',
                    activityplace:'',
                    activitymoney:'',
                    activityinfo:'',
                },
                idx: -1,
                id: -1,
                onVisible: false,
                editfile: 'http://localhost/fitness/public/static/img/Snipaste_2019-07-22_10-59-50.png',
                tempic: ''
            }
        },
        created() {
            this.getData();
        },
        computed: {
            data() {
                return this.tableData.filter((d) => {
                    if (d.activityplace.indexOf(this.select_word) > -1 ||
                        (d.activityname.indexOf(this.select_word) > -1)
                    ) {
                        return d;
                    }
                })
            }
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },
            // 获取 easy-mock 的模拟数据
            getData() {
                this.$axios.get('/api/Activity/activityList').then((result) => {
                    this.tableData = result.data
                }).catch((err) => {
                    console.log('err :', err); 
                });
            },
            search() {
                this.is_search = true;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(row) {
                this.id = row.activityid;
                this.form = {
                    activityname: row.activityname,
                    activitytime: row.activitytime,
                    activityplace: row.activityplace,
                    activitymoney: row.activitymoney,
                    activityinfo: row.activityinfo,
                    activityid: row.activityid
                }
                this.tempic = row.pic;
                if(row.pic == null){
                    this.editfile = 'http://localhost/fitness/public/static/img/Snipaste_2019-07-22_10-59-50.png';
                }else{
                    this.editfile = 'http://localhost/fitness/public/static/img/'+row.pic;
                }
                this.editVisible = true;
            },
            handleDelete(row) {
                this.id = row.activityid;
                this.delVisible = true;
            },
            handleOn(row) {
                this.id = row.activityid;
                this.onVisible = true;
            },
            delAll() {
                const length = this.multipleSelection.length;
                let str = '';
                this.del_list = this.del_list.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error('删除了' + str);
                this.multipleSelection = [];
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 保存编辑
            saveEdit() {
                this.editVisible = false;
                let formData = new FormData();
                for(let key in this.form){
                    formData.append(key,this.form[key])
                }
                if(this.$refs.editfile.files.length!=0){
                    formData.append('pic', this.$refs.editfile.files[0]);
                    console.log('object :', this.$refs.editfile.value);
                    this.$refs.editfile.value = '';
                }
                let config = {headers: { 'Content-Type': 'multipart/form-data' }}
                this.$axios.post('/api/Activity/editActivity',formData,config).then(res => {
                    if(res.data == 1){
                        this.$message.success(`修改成功`);
                        this.getData();
                        this.editVisible = false;
                    } else if (res.data == 0) {
                        this.$message({
                            message: '请修改一部分值',
                            type: 'warning',
                        });
                    }
                })
            },
            // 确定删除
            deleteRow(){
                this.delVisible = false;
                this.$axios.get('/api/Activity/conActivity',{
                    params: {
                        activityid: this.id,
                        mod: 1
                    }
                }).then(res => {
                    this.$message.success('禁用成功');
                    this.getData();
                })
            },
            // 确定启用
            onRow(){
                this.onVisible = false;
                this.$axios.get('/api/Activity/conActivity',{
                    params: {
                        activityid: this.id,
                        mod: 0
                    }
                }).then(res => {
                    this.$message.success('启用成功');
                    this.getData();
                })
            },
            editChoiceAvatar(){
                document.getElementById('editFile').click();
            },
            editAvatar(){
                if(this.$refs.editfile.files.length == 0){
                    if(this.tempic){
                        this.editfile = 'http://localhost/fitness/public/static/img/'+this.tempic;
                    }else{
                        this.editfile = 'http://localhost/fitness/public/static/img/Snipaste_2019-07-22_10-59-50.png';
                    }
                }else{
                    this.editfile = this.$refs.editfile.files[0];
                    this.geteditImgBase();                    
                }
            },            
            getImgBase(){
                var _this = this;
                var file = this.$refs.getfile.files[0];
                var reader = new FileReader(); 
                //转base64
                reader.onload = function(e) {
                    _this.file = e.target.result;
                }
                reader.readAsDataURL(file);
            },
            geteditImgBase(){
                var _this = this;
                var editfile = this.$refs.editfile.files[0];
                var reader = new FileReader(); 
                //转base64
                reader.onload = function(e) {
                    _this.editfile = e.target.result;
                }
                reader.readAsDataURL(editfile);
            },
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
    .image-pre>.pre-view{
        height: 80px;
        width: 80px;
        overflow: hidden;
        margin-top: 20px;
        justify-content: center;
        justify-items: center;
        align-items: center;
        border-radius: 4px;
    }
    .pre-view>img{
        width: 80px;
        transform: scale(2.5);
    }
</style>
